<template>
    <scroller class="page">
        <div class="field" :class="[isAccountInputFocus ? 'field-focus' : '']">
            <input class="input-account" type="tel" v-model="account" placeholder="手机号码" @focus="onAccountFocus" @blur="onAccountBlur" />
        </div>
        <div class="field" :class="[isCodeInputFocus ? 'field-focus' : '']">
            <input class="input-code" type="number" v-model="veriCode" placeholder="验证码" @focus="onCodeFocus" @blur="onCodeBlur" />
            <div class="send-code-btn" @click="sendCode" v-if="countDown == 0">
                <text class="btn-text">发送验证码</text>
            </div>
            <div class="send-code-btn" v-else>
                <text class="btn-text">已发送({{ countDown }})</text>
            </div>
        </div>
        <div class="login-btn" @click="submit">
            <text class="btn-text">登录</text>
        </div>
        <Footer />
    </scroller>
</template>
<script>
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const event = weex.requireModule('event');
const authChannel = new BroadcastChannel('auth');
export default {
    name: 'App',
    components: {
        Footer
    },
    data() {
        return {
            info: {},
            account: '',
            veriCode: '',
            isAccountInputFocus: false,
            isCodeInputFocus: false,
            countDown: 0,
            intervalId: null
        }
    },
    watch: {
        countDown: function(val) {
            if (val <= 0) {
                clearInterval(this.intervalId);
            }
        }
    },
    mounted() {
        event.initData(JSON.stringify({ 'title': '登录' }), json => {
            this.init();
        })
    },
    methods: {
        init() {
            // var url = '/yq/order/info';
            // var params = {
            //   openId: 'oc2ls5ehaHUgNAyUTTiK_fDVZh9w',
            //   orderId: 2590
            // };
            // var success = res => {
            //   console.log(res);
            //   this.info = res.info;
            // }
            // var fail = res => {
            //   modal.toast({
            //     message: '获取数据失败',
            //     duration: 1
            //   })
            // }
            // utils.request(url, params, success, fail);
        },
        sendCode() {
            if (this.countDown > 0) {
                return;
            }
            if (!this.account) {
                modal.toast({
                    message: '请输入手机号',
                    duration: 2
                })
                return;
            }
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.account)) {
                modal.toast({
                    message: '请输入正确的手机号',
                    duration: 2
                })
                return;
            }
            var url = '/yq/api/sms';
            var params = {
                project: 'zhihui',
                mobile: this.account
            };
            var success = res => {
                modal.toast({
                    message: '验证码发送成功',
                    duration: 2
                })
                this.countDown = 60;
                this.intervalId = setInterval(() => {
                    this.countDown = this.countDown - 1;
                }, 1000);
            }
            var fail = res => {}
            utils.request(url, params, success, fail);
        },
        submit() {
            var url = '/yq/auth/login';
            // var url = '/yq/auth/debug';
            var params = {
                mobile: this.account,
                code: this.veriCode
            };
            var success = res => {
                var token = res.info;
                authChannel.postMessage("ok");
                event.saveToken(token, function() {})
                event.onPop('');
            }
            var fail = res => {
                modal.toast({
                    message: '登录失败：' + res.msg,
                    duration: 3
                })
            }
            utils.request(url, params, success, fail);
        },
        onAccountFocus() {
            this.isAccountInputFocus = true;
        },
        onAccountBlur() {
            this.isAccountInputFocus = false;
        },
        onCodeFocus() {
            this.isCodeInputFocus = true;
        },
        onCodeBlur() {
            this.isCodeInputFocus = false;
        }
    }
}
</script>
<style scoped>
text {
    font-size: 32px;
}

.page {
    padding: 200px 50px 50px 50px;
}

.field {
    padding: 10px;
    margin-bottom: 80px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #ccc;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.field-focus {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-bottom-color: #888;
}

.input-account {
    font-size: 32px;
    height: 70px;
    width: 630px;
}

.input-code {
    font-size: 32px;
    height: 70px;
    width: 420px;
}

.send-code-btn {
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #527a5f;
    width: 210px;
    height: 70px;
}

.login-btn {
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #527a5f;
    height: 80px;
}

.btn-text {
    font-size: 30px;
    color: #fff;
}
</style>